import React, { useEffect, useState } from 'react';
import * as service from '../../api/jiang/index'
import '../../styles/jiang/DataSurvey.scss'
import { DatePicker, Space, Table, Button, Card, Col, Row } from 'antd';
import { Line, Pie, Column, Bar } from '@ant-design/plots';

interface Props {

}

const { RangePicker } = DatePicker;
function DataSurvey(props: Props) {
    const [datalist, setDatalist] = useState([])
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState([]);
    const [datanl, setDatanl] = useState([]);
    const [datafw, setDatafw] = useState([]);
    const [databq, setDatabq] = useState([]);


    useEffect(() => {
        setLoading(true);
        service.database_list().then((res) => {
            // console.log(res);
            setDatalist(res.data)
            setLoading(false);
        })


        service.datagk().then((res) => {
            setData(res.data);
            setLoading(false);
        })
        service.data().then((res) => {
            // console.log(res);
            setDatanl(res.data);
            setLoading(false);
        })

        service.datafw().then((res) => {
            // console.log(res);
            setDatafw(res.data)
            setLoading(false);
        })

        service.databq().then((res) => {
            // console.log(res);
            setDatabq(res.data)
            setLoading(false);
        })


    }, [])

    const onChange = (value: any, dateString: any) => {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
    };

    const onOk = (value: any) => {
        console.log('onOk: ', value);
    };


    const columns = [
        {
            title: '数据类型',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '2021-01-04',
            dataIndex: 'count1',
            key: 'count1',
        },
        {
            title: '2021-01-05',
            dataIndex: 'count2',
            key: 'count2',
        },
        {
            title: '2021-01-06',
            dataIndex: 'count3',
            key: 'count3',
        },
        {
            title: '2021-01-07',
            dataIndex: 'count4',
            key: 'count4',
        },
        {
            title: '2021-01-08',
            dataIndex: 'count5',
            key: 'count5',
        },
        {
            title: '2021-01-09',
            dataIndex: 'count6',
            key: 'count6',
        },
        {
            title: '2021-01-10',
            dataIndex: 'count7',
            key: 'count7',
        },
    ]


    // 数据概况
    const config = {
        data,
        height: 200,
        xField: 'year',
        yField: 'value',
        seriesField: 'dates',
        point: {
            size: 5,
            shape: 'diamond',
        }
    };

    //  年龄统计
    const confignl = {
        appendPadding: 10,
        data: datanl,
        angleField: 'population',
        colorField: 'years',
        radius: 1,
        innerRadius: 0.6,
        label: {
            type: 'inner',
            offset: '-50%',
            content: '{value}',
            style: {
                textAlign: 'center',
                fontSize: 14,
            },
        },
        interactions: [
            {
                type: 'element-selected',
            },
            {
                type: 'element-active',
            },
        ],
        statistic: {
            //   title: false,
            content: {
                style: {
                    whiteSpace: 'pre-wrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                },
                content: '居民总数\n920',
            },
        },
    };

    // 学历统计
    const dataxl = [
        { "key": 1, "education": "小学", "population": 100, "proportional": "10.8%" },
        { "key": 2, "education": "初中", "population": 240, "proportional": "26.0%" },
        { "key": 3, "education": "高中/中专", "population": 120, "proportional": "13.0%" },
        { "key": 4, "education": "大专", "population": 120, "proportional": "13.0%" },
        { "key": 5, "education": "不详", "population": 340, "proportional": "37.2%" }
    ]
    const configxl = {
        appendPadding: 10,
        data: dataxl,
        angleField: 'population',
        colorField: 'education',
        radius: 1,
        innerRadius: 0.6,
        label: {
            type: 'inner',
            offset: '-50%',
            content: '{value}',
            style: {
                textAlign: 'center',
                fontSize: 14,
            },
        },
        interactions: [
            {
                type: 'element-selected',
            },
            {
                type: 'element-active',
            },
        ],
        statistic: {
            //   title: false,
            content: {
                style: {
                    whiteSpace: 'pre-wrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                },
                content: '居民总数\n920',
            },
        },
    };
    // 性别统计
    const dataxb = [
        { "sex": "男", "population": 600, "proportional": "65.2%" },
        { "sex": "女", "population": 240, "proportional": "28.2%" },
        { "sex": "未知", "population": 80, "proportional": "8.6%" },
    ]
    const configxb = {
        appendPadding: 10,
        data: dataxb,
        angleField: 'population',
        colorField: 'sex',
        radius: 1,
        innerRadius: 0.6,
        label: {
            type: 'inner',
            offset: '-50%',
            content: '{value}',
            style: {
                textAlign: 'center',
                fontSize: 14,
            },
        },
        interactions: [
            {
                type: 'element-selected',
            },
            {
                type: 'element-active',
            },
        ],
        statistic: {
            //   title: false,
            content: {
                style: {
                    whiteSpace: 'pre-wrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                },
                content: '居民总数\n920',
            },
        },
    };

    // 标签统计
    const configbq = {
        data: databq,
        xField: 'value',
        yField: 'tag',
        // legend: {
        //   position: 'top-left',
        // },
        barBackground: {
            style: {
                fill: 'rgba(0,0,0,0.1)',
            },
        },

        interactions: [
            {
                type: 'active-region',
                enable: false,
            },
        ],
        minBarWidth: 10,
        maxBarWidth: 10,

    };

    // 服务包
    const configfw = {
        data: datafw,
        // height: 200,
        isStack: true,
        xField: 'year',
        yField: 'value',
        seriesField: 'dates',
        minColumnWidth: 20,
        maxColumnWidth: 20,
    };
    return (
        <div className='data-survey' style={{ padding: 20 }}>
            <div className='title'>数据概况</div>

            <Space direction="vertical" size={12} style={{ paddingBottom: 20 }} >
                <div>
                    <span>选择日期</span>&nbsp;&nbsp;
                    <RangePicker
                        showTime={{ format: 'HH:mm' }}
                        format="YYYY-MM-DD HH:mm"
                        onChange={onChange}
                        onOk={onOk}
                    />
                </div>
            </Space>


            <Card title="数据概况" bordered={false} >
                <Line {...config} />
                {/* href='/dc/api/custom/export' */}
                <Button style={{ float: 'right', margin: '10px 0' }}  >导出</Button>
                <Table columns={columns} dataSource={datalist} loading={loading}
                    summary={() => (
                        <Table.Summary fixed>
                            <Table.Summary.Row>
                                <Table.Summary.Cell index={0}>合计</Table.Summary.Cell>
                                <Table.Summary.Cell index={1}>143</Table.Summary.Cell>
                                <Table.Summary.Cell index={2}>275</Table.Summary.Cell>
                                <Table.Summary.Cell index={3}>422</Table.Summary.Cell>
                                <Table.Summary.Cell index={4}>416</Table.Summary.Cell>
                                <Table.Summary.Cell index={5}>384</Table.Summary.Cell>
                                <Table.Summary.Cell index={6}>318</Table.Summary.Cell>
                                <Table.Summary.Cell index={7}>315</Table.Summary.Cell>
                            </Table.Summary.Row>
                        </Table.Summary>
                    )}
                />
            </Card>
            <Row gutter={16} style={{ paddingTop: 20 }}>
                <Col span={8}>
                    <Card title="居民年龄构成" bordered={false}>
                        <Pie {...confignl} />
                    </Card>
                </Col>
                <Col span={8}>
                    <Card title="居民学历构成" bordered={false}>
                        <Pie {...configxl} />
                    </Card>
                </Col>
                <Col span={8}>
                    <Card title="居民性别构成" bordered={false}>
                        <Pie {...configxb} />
                    </Card>
                </Col>
            </Row>


            <Row gutter={16} style={{ paddingTop: 20 }}>
                <Col span={8}>
                    <Card title="居民标签" bordered={false}>
                        <Bar {...configbq} />
                    </Card>
                </Col>
                <Col span={16}>
                    <Card title="服务包使用情况" bordered={false}>
                        <Column {...configfw} />
                    </Card>
                </Col>
            </Row>
        </div>

    );
}

export default DataSurvey;